﻿@page "/listbox/template"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the Item Template  functionality in ListBox component. Here, SVG icons were used for visual representation of every list items.</p>
</SampleDescription>
<ActionDescription>
   <p>This sample illustrates how to integrate the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxTemplates-1.html#Syncfusion_Blazor_DropDowns_ListBoxTemplates_1_ItemTemplate' target='_blank'> ItemTemplate</a> to customize the list item's content and this can be specified by using ItemTemplate directive. Inside the Template, you can access the data using the implicit named parameter <strong>Context</strong>.</p>
   <p>More information on the template feature configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/listbox/icons-and-templates/#templates' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="listbox-control">
        <SfListBox CssClass="e-template-listbox" TValue="string[]" DataSource="@Data" TItem="ListData">
            <ListBoxFieldSettings Text="Text"></ListBoxFieldSettings>
            <ListBoxTemplates TItem="ListData">
                <ItemTemplate>
                    <div class="list-wrapper">
                        <span class="@((context as ListData).Pic) e-avatar e-avatar-xlarge e-avatar-circle"></span>
                        <span class="text">@((context as ListData).Text)</span><span class="description">@((context as ListData).Description)</span>
                    </div>
                </ItemTemplate>
            </ListBoxTemplates>
        </SfListBox>
    </div>
</div>

@code{
    public ListData Model = new ListData();
    public List<ListData> Data = new List<ListData>
    {
        new ListData { Text = "Javascript", Pic = "javascript", Description = "It is a lightweight interpreted or JIT-compiled programming language." },
        new ListData { Text = "Typescript", Pic = "typescript", Description = "It is a typed superset of JavaScript that compiles to plain JavaScript." },
        new ListData { Text = "Angular", Pic = "angular", Description = "It is a TypeScript-based open-source web application framework." },
        new ListData { Text = "React", Pic = "react", Description = "A JavaScript library for building user interfaces. It can also render on the server using Node." },
        new ListData { Text = "Vue", Pic = "vue", Description = "A progressive framework for building user interfaces. it is incrementally adoptable." }
    };

    public class ListData
    {
        public string Text { get; set; }
        public string Pic { get; set; }
        public string Description { get; set; }
    }
}
@*Hidden:Lines*@
<style>
    #listbox-control {
        max-width: 450px;
        margin: auto;
    }
</style>
@*End:Hidden*@

<style>
	.e-template-listbox .e-list-item {
        line-height: 1.5 !important;
        padding: 0 16px !important;
    }
	
    .list-wrapper {
        height: inherit;
        position: relative;
        padding: 14px 12px 14px 78px;
    }

    .e-listbox-container .e-list-item {
        height: auto !important;
    }

    .list-wrapper .text,
    .list-wrapper .description {
        display: block;
        margin: 0;
        padding-bottom: 3px;
        white-space: normal;
    }

    .list-wrapper .description {
        font-size: 12px;
        font-weight: 500;
    }

    .e-listbox-wrapper .list-wrapper .text {
        font-weight: bold;
        font-size: 13px;
    }

    .list-wrapper .e-avatar {
        position: absolute;
        left: 5px;
        background-color: transparent;
        font-size: 22px;
        top: calc(50% - 35px);
    }

    .bootstrap4 .list-wrapper .e-avatar {
        top: calc(50% - 28px);
    }

    .javascript {
        background-image: url('./images/listbox/javascript.svg');
    }

    .typescript {
        background-image: url('./images/listbox/typescript.svg')
    }

    .angular {
        background-image: url('./images/listbox/angular.svg');
    }

    .vue {
        background-image: url('./images/listbox/vue.svg');
    }

    .react {
        background-image: url('./images/listbox/react.svg');
    }
</style>